const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin()
    ],
    module: {//放的是加载器
        rules: [//规则
            {//一个具体的规则对象
                test: /\.css$/i,//正则的意思是匹配以.css结尾的文件
                use: ["style-loader", "css-loader"],//使用时是从右到左的,所以"style-loader", "css-loader"不能颠倒顺序
            },
            {
                test: /\.less$/i,
                use: [ // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.(gif|png|jpg|jpeg)$/i,
                type: "asset",
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ],
    },
};